<template>
  <div class="header">
    <div class="header-left fl">
      <span class="iconfont">&#xe624;</span>
    </div>
    <div class="header-center">
      <span class="iconfont">&#xe632;</span>
      输入城市/景点/游玩地点
      </div>
    <router-link to="/city">
      <div class="header-right fr">
        城市
        <span class="iconfont">&#xe62d;</span>
      </div>
    </router-link>
  </div>
</template>
<script>
export default {
  name: 'HomeHeader',
  props: {
    city: String
  }
}
</script>
<style lang="scss" scoped>
@import '~style/base.scss';
$bodyFontSize: .12rem;
.header {
color: #fff;
display: flex;
height: $headerHeight;
width: 100%;
background: {
  color: $themeColor;
}
line-height: $headerHeight;
font: {
  size: $bodyFontSize;
}
}

.header-left {
width: .32rem;
margin: {
  left: .1rem;
}
}

.header-center {
flex: 1;
height: .34rem;
line-height: .34rem;
padding: {
  left:.1rem;
}
margin: {
  top: .05rem;
}
border: {
  radius: .05rem;
}
background: {
  color: #fff;
}
color: #ccc;
}

.header-right {
color: #fff;
width: .62rem;
text-align: center;
}
</style>
